<template>
  <el-dialog :title="title" :visible.sync="isOpen" width="680px" append-to-body>
    <el-form ref="form" :model="form" label-width="110px">
      <el-row>
        <el-col :span="24">
          <img  width="640" height="480" :src="bigPriImage"></img>
        </el-col>
      </el-row>
      <!--<el-row>
        <el-col :span="24">
            <el-input type="textarea" v-model="outputData" placeholder="" :rows="5" disabled/>
        </el-col>
      </el-row>-->
      <!--<el-row>
        <el-col :span="8">
          <label id="lab1">设备1</label>
        </el-col>
        <el-col :span="8">
         &lt;!&ndash; <el-select v-model="form.budgetYear" placeholder="请选择预算年度" clearable size="small"
                     :disabled="operation!='edit'">
            <el-option v-for="budgetYearInfo in priModelOptions" :key="budgetYearInfo.exeYear"
                       :label="budgetYearInfo.description" :value="budgetYearInfo.exeYear"/>
          </el-select>&ndash;&gt;
          &lt;!&ndash;<select id="priModelList" style="width: 120px"></select>&ndash;&gt;
        </el-col>
        <el-col :span="8">
          <select id="priResolutionList" style="width: 120px"></select>
        </el-col>
      </el-row>-->
      <el-row :gutter="10" style="margin-top:10px">
        <el-col :span="4">
          <el-button type="primary" @click="photographPriClick">主头拍照</el-button>
          <!--<input id="photographPri" type="button" value="主头拍照"/>-->
        </el-col>
        <el-col :span="4">
          <!--<el-button >左 转</el-button>-->
          <!--<input id="rotateLeft" type="button" value="左转"/>-->
        </el-col>
        <el-col :span="4">
          <!--<el-button >右 转</el-button>-->
          <!--<input id="rotateRight" type="button" value="右转"/>-->
        </el-col>
        <el-col :span="4">
          <!--<el-button >属性设置</el-button>-->
          <!--<input id="showProperty" type="button" value="属性设置"/>-->
        </el-col>
        <el-col :span="4">
          <!--<el-button >删除文件</el-button>-->
          <!--<input id="deleteFile" type="button" value="删除文件"/>-->
        </el-col>
        <el-col :span="4">
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span v-for="(imageInfo,index) in imageList">
            <img width='105' height='85'   :src='imageInfo.base64' style="margin-left:10px;margin-top:10px;"/>
            <el-button @click='deleteImage(index)'>删除</el-button>
          </span>
          <!--<input type='checkbox' checked='checked' onchange='checkboxClicked(this)' />-->
        </el-col>
      </el-row>
    </el-form>
    <!--<div class="el-table-editabled">
      <table>
      <tr>
        &lt;!&ndash;<input id="openHtml" type="button" value="初始化"/>
        <input id="closeHtml" type="button" value="反初始化"/>&ndash;&gt;
        <br/>
      <tr>
        <label id="lab1">设备1</label>
        <select id="priModelList" style="width: 120px"></select>
        <select id="priResolutionList" style="width: 120px"></select>
        设置尺寸：<select id="setScanSize" style="width: 90px"></select>
        &lt;!&ndash;<input id="openPriVideo" type="button" value="打开主视频"/>
        <input id="closePriVideo" type="button" value="关闭主视频"/>&ndash;&gt;
        <input id="photographPri" type="button" value="主头拍照"/>
        &lt;!&ndash;<input id="imageBlend" type="button" value="合成拍照"/>&ndash;&gt;
        <br/>

        <br/>
        <input id="rotateLeft" type="button" value="左转"/>
        <input id="rotateRight" type="button" value="右转"/>
        <input id="showProperty" type="button" value="属性设置"/>
        <br/>

        <br/>
        <input id="deleteFile" type="button" value="删除文件"/>
        <input id="getFileBase64" type="button" value="获取文件base64"/>
        <div id="container" style="float:left;"></div>
      </tr>
      </table>
    </div>-->
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import qwebchannel from './qwebchannel'

  export default {
    name: 'ElEloam',
    props: {
      callback: {
        type: Function,
        default: null
      }
    },
    data() {
      return {
        outputData:'',
        baseUrl:'',
        socket:null,
        isOpen:false,
        title:'',
        form:{},
        imageList:[],
        bigPriImage:null,
        //设备名称
        bigPriName:null,
      }
    },
    created(){

    },
    watch: {},
    methods: {
      S4(){
        return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
      },
      guid(){
        return (this.S4()+this.S4()+"-"+this.S4()+"-"+this.S4()+"-"+this.S4()+"-"+this.S4()+this.S4()+this.S4());
      },
      openSocket(){
        let socket=this.socket;
        let output=this.output;
        socket = new WebSocket(this.baseUrl);
        socket.onclose = function()
        {
          console.error("web channel closed");
        };
        socket.onerror = function(error)
        {
          console.error("web channel error: " + error);
        };

        let _that=this;
        socket.onopen = function()
        {
          output("WebSocket connected");
          qwebchannel.QWebChannel(socket, function(channel) {
            _that.dialog=channel.objects.dialog;
            //获取注册的对象
            let dialog = _that.dialog
            //网页关闭函数
            window.onbeforeunload = function() {
              dialog.get_actionType("closeSignal");
            }
            window.onunload = function() {
              dialog.get_actionType("closeSignal");
            }

            //服务器返回消息
            dialog.sendPrintInfo.connect(function(message) {
              console.log("message:",message)
              //读取二代证头像返回信息
              if(message.indexOf("idFaceInfo:") >= 0)
              {
                var value = message.substr(11);
                var element = document.getElementById("devPhoto2");
                element.src = "data:image/jpg;base64," + value;
                return;
              }
              //获取文件base64返回值
              else if(message.indexOf("fileBase64:") >= 0)
              {
                var value = message.substr(11);
                alert(value);
                return;
              }
              output(message);

              /********主头设备信息***********/
              //设备名
              if(message.indexOf("priDevName:") >= 0)
              {
                message = message.substr(11);
                _that.bigPriName=message;
                // var label = document.getElementById("lab1");
                // label.innerHTML = message;
              }
              //主头设备出图格式
              else if(message.indexOf("priModel:") >= 0)
              {
                message = message.substr(9);
                /*var select = document.getElementById("priModelList");
                if(message.indexOf("MJPG") >= 0)
                {
                  select.add(new Option(message), 0);
                } else{
                  select.add(new Option(message));
                }
                select.selectedIndex=0;*/
              }
              //主头设备分辨率
              else if(message.indexOf("priResolution:") >= 0)
              {
                message = message.substr(14);
                /*var select = document.getElementById("priResolutionList");
                select.add(new Option(message));
                if(select.options.length > 3)
                {
                  select.selectedIndex = 2;
                }*/
              }
                /********副头设备信息***********/
              //设备名
              else if(message.indexOf("subDevName:") >= 0)
              {
                message = message.substr(11);
                /*var label = document.getElementById("lab2");
                label.innerHTML = message;*/
              }
              //副头设备出图格式
              else if(message.indexOf("subModel:") >= 0)
              {
                message = message.substr(9);
                /*var select = document.getElementById("subModelList");
                if(message.indexOf("MJPG") >= 0)
                {
                  select.add(new Option(message), 0);
                } else{
                  select.add(new Option(message));
                }
                select.selectedIndex=0;*/
              }
              //副头设备分辨率
              else if(message.indexOf("subResolution:") >= 0)
              {
                message = message.substr(14);
                /*var select = document.getElementById("subResolutionList");
                select.add(new Option(message));
                if(select.options.length > 2)
                {
                  select.selectedIndex = 1;
                }*/
              }
              //后台程序返回设备序列号
              else if(message.indexOf("SerialNumber:") >= 0)
              {
                var SerialNumber = message.substr(13);
              }
              //后台程序条形码、二维码识别结果
              else if(message.indexOf("BarcodeInfo:") >= 0)
              {
                //格式为 "BarcodeInfo:" + "个数\n" + "识别结果\n"。每个每个结果后有换行符
                var BarcodeInfo = message.substr(12);
              }
              //图片保存后返回路径关键字savePhoto_success:
              else if(message.indexOf("savePhoto_success:") >= 0)
              {
                let imgPath = message.substr(18);
                // addImgDiv();
                // _that.imageList.push(imgPath);
              }
            });
            //接收图片流用来展示，多个，较小的base64，主头数据
            dialog.send_priImgData.connect(function(message) {
              // var element = document.getElementById("bigPriDev");
              _that.bigPriImage = "data:image/jpg;base64," + message;
            });
            //接收图片流用来展示，多个，较小的base64，副头数据
            /*dialog.send_subImgData.connect(function(message) {
              var element = document.getElementById("bigSubDev");
              element.src = "data:image/jpg;base64," + message;
            });*/

            //接收拍照base64，主头数据
            dialog.send_priPhotoData.connect(function(message) {
              // var element = document.getElementById("devPhoto");
              // element.src = "data:image/jpg;base64," + message;
              _that.imageList.push({'base64':"data:image/jpg;base64," + message,name:_that.guid()+".jpg"});
            });
            //接收拍照base64，副头数据
            /*dialog.send_subPhotoData.connect(function(message) {
              var element = document.getElementById("devPhoto2");
              element.src = "data:image/jpg;base64," + message;
            });*/

            output("ready to send/receive messages!");
            //网页加载完成信号
            //dialog.html_loaded("two");
            dialog.html_loaded("faceDetect_two");

            //设置图片dpi，第二个参数是dpi大小
            dialog.get_functionTypes("setImageProperty", "300", "", "");
          });
        }
      },output(message){
        this.outputData=this.outputData + message + "\n";
      },socketInit(){
        if(this.dialog!=null){
          this.dialog.devChanged("primaryDev_:" + this.bigPriName);
          return;
        }
        this.baseUrl = "ws://127.0.0.1:12345";
        this.output("Connecting at " + this.baseUrl + ".");
        this.openSocket();
      },
      open({}) {
        this.isOpen = true
        this.title = '高拍仪拍摄'
        // let _that=this;
        /*function openSocket() {

        }


        //输出信息
        function output(message){
          _that.output=_that.output + message + "\n";
          // var output = document.getElementById("output");
          // output.innerHTML = output.innerHTML + message + "\n";
          // output.scrollTop = output.scrollHeight;
        }
        //网页初始化函数
        function init() {

          // var scanSize = document.getElementById('setScanSize');
          /!*scanSize.add(new Option("原始尺寸"));
          scanSize.add(new Option("A5"));
          scanSize.add(new Option("A4"));
          scanSize.add(new Option("卡片"));
          scanSize.selectIndex = 0;*!/

          // imageIndex = -1;
        }*/
        this.socketInit();
      },
      // 取消按钮
      cancel() {
        this.isOpen = false
        // this.dialog.get_actionType("closeSignal");
        this.dialog.get_actionType("closePriVideo");
      },
      submitForm(){

        let isSuccess=true;
        if(this.callback!=null){
          isSuccess=this.callback(this.imageList);
          isSuccess=isSuccess==null?true:isSuccess;
        }
        if(isSuccess){
          this.isOpen = false
          this.dialog.get_actionType("closePriVideo");
          this.imageList=[];
        }
      },
      photographPriClick(){
        this.dialog.photoBtnClicked("primaryDev_");
        this.dialog.get_actionType("savePhotoPriDev");
      },deleteImage(i){
        this.imageList.splice(i,1);
      }
    }
  }
</script>
